<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axis</title>
    <script src="./js/d3.min.js"></script>
</head>
<style>
    svg text {
        fill: purple;
        font: 12px sans-serif;
        text-anchor: end;
    }
</style>

<body>

</body>
<script>
    /**
     * d3.axisTop() - 此方法用于创建顶部水平轴。
     * d3.axisRight() - 此方法用于创建垂直的右向轴。
     * d3.axisBottom() - 此方法用于创建底部水平轴。
     * d3.axisLeft() - 它创建左垂直轴。
    */
    var width = 1000, height = 800;
    var data = [100, 150, 200, 250, 280, 300];
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

    var xscale = d3.scaleLinear()
        .domain([0, d3.max(data)])
        .range([0, width - 100]);

    var yscale = d3.scaleLinear()
        .domain([0, d3.max(data)])
        .range([height / 2, 0]);

    var x_axis = d3.axisBottom()
        .scale(xscale);

    var y_axis = d3.axisLeft()
        .scale(yscale);

    svg.append("g")
        .attr("transform", "translate(50, 10)")
        .call(y_axis);

    var xAxisTranslate = height / 2 + 10;
    svg.append("g")
        .attr("transform", "translate(50, " + xAxisTranslate + ")")
        .call(x_axis)
</script>

</html>